<template>
  <div>
    <div>{{person.name}}:{{person.age}}</div>
    <!-- <div>{{reverseMessage}}</div> -->
    <button @click="clickHandle">点击</button>

    <!-- 第一种反转 message 的方式 -->
    <!-- <div>{{message.split('').reverse().join('')}}</div> -->
    <!-- 第二种反转 message 的方式 -->
    <!-- <div>计算属性反转：{{reverseMessage}}</div> -->
    <!-- 第三种反转 message 的方式 -->
    <!-- <div>函数反转: {{reverseMessageFn()}}</div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello',
      name: '无名',
      person: {
        name: '无名',
        age: 0,
      },
    };
  },
  // 计算属性
  // 计算属性中依赖的 data 中的数据改变时，计算属性会跟着改变;
  computed: {
    reverseMessage() {
      console.log('计算属性');
      return this.message.split('').reverse().join('');
    },
  },

  // 侦听器
  watch: {
    person: {
      handler: (v1, v2) => {
        console.log(v1, v2);
        console.log('person 改变了');
      },
      deep: true,
    },
    // message: 'messageChange',
    message: {
      handler: (newValue, oldValue) => {
        console.log(newValue, oldValue);
      },
      immediate: true,
    },
    // message: [{
    //   handler() {
    //     console.log('改变了 message， 回调1');
    //   },
    // }, {
    //   handler() {
    //     console.log('改变了 message， 回调2');
    //   },
    // }],
    // message: [() => {
    //   console.log('改变了 message， 回调1');
    // }, () => {
    //   console.log('改变了 message， 回调2');
    // }],
    // message: {
    //   handler() {
    //     console.log('改变了 message');
    //   },
    // },
    // message: function() {},
    // message() {
    //   console.log('改变了 message');
    // },
  },

  methods: {
    reverseMessageFn() {
      console.log('函数');
      return this.message.split('').reverse().join('');
    },
    clickHandle() {
      // this.name = '叶新枝';
      this.message = '天浩陈';
      // this.person.name = '文伟';
    },
  },
};
</script>

<style>
</style>
